<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList" highlight-color="#ff9854">
      <!-- 热门城市 -->
      <van-index-anchor :index="'热门'" />
      <div class="hotCity">
        <template v-for="(city, index) in groupData.hotCities">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>
      <!-- 城市分组列表 -->
      <template v-for="(item, index) in groupData.cities" :key="item">
        <van-index-anchor :index="item.group">{{
          item.group
        }}</van-index-anchor>

        <template v-for="(item1, index1) in item.cities" :key="item1">
          <van-cell :title="item1.cityName" @click="cityClick(item1)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "vue"

const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({}),
  },
})

// 获取侧边栏的索引
const indexList = computed(() => {
  const list = props.groupData.cities?.map((item) => item.group)
  list?.unshift("#")
  return list
})

// 城市点击
import { useCityStore } from "@/stores/modules/city"
import { useRouter } from "vue-router"

const cityStore = useCityStore()
const router = useRouter()
const cityClick = (city) => {
  cityStore.currentCity = city
  router.back()
}
</script>

<style lang="less" scoped>
.hotCity {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px 20px 10px 10px;
  .city {
    margin: 7px;
    width: 50px;
    height: 26px;
    text-align: center;
    line-height: 30px;
    background-color: #f5e9e4;
    border: 1px solid #f5e9e4;
    border-radius: 17px;
  }
}
</style>
